<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>导航</title>
  <link href="css/style.css" rel="stylesheet"/>
  <script src="./js/jquery-1.12.4.js"></script>
 </head>
 <body>
	<div class="nav-box" style="margin-top: 30px;">
		<div class="wrap" style="width: 725px;background: #fff">
			<ul class="nav-ul">
				<li class="all"><a href="">首页</a></li>
				<li><a href="">秒杀</a></li>
				<li><a href="">优惠</a></li>
				<li><a href="">PLUS会员</a></li>
				<li><a href="">闪购</a></li>
				<li><a href="">服饰</a></li>
				<li><a href="">婴孕童</a></li>
				<li><a href="">家具</a></li>
				<li><a href="">电器城</a></li>
				<div class="clearfix"></div>
			</ul>
		</div>
	</div>
	<script>
		$(document).ready(function(){
			// 鼠标移入之后颜色变深

			// enter 和over的区别：over子元素也会触发，但是enter只触发一次
			$(".nav-ul a").mouseenter(function(){//out
				$(this).css("background-color","#000");
				console.log('a');
				
			})
			$(".nav-ul a").mouseleave(function(){//enter
				$(this).css("background-color","#efefef");
				console.log('b');

			})

			// 鼠标移出颜色变浅
		})
	</script>
 </body>
</html>
